<template>
  <div class="bc1">

<el-card>

  <b-navbar-item tag="div" >
          <b-field  >
            <b-input
              v-model="searchKey"
              class="s_input"
              placeholder="搜索帖子、标签和用户"
              rounded
              clearable
              @keyup.enter.native="search()"
            />

            <p class="control">
              <b-button
                class="is-info"
                @click="search"
              >检索
              </b-button>
            </p>
          </b-field>
        </b-navbar-item>

</el-card>

    <el-card shadow="never">
      <div slot="header" class="clearfix">
        检索到 <code>{{ list.length }}</code>
        条关于 <code class="has-text-info">{{ query.keyword }}</code> 的记录
  <button class="ui teal basic button mini" @click="goff">返回</button>
      </div>

      <div>
        <article v-for="(item, index) in list" :key="index" class="media">
          <div class="media-left">
            <figure class="image is-48x48">
              <img :src="item.avatar">
            </figure>
          </div>
          <div class="media-content">
            <div class="">
              <p class="ellipsis is-ellipsis-1">
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                  <router-link :to="{name:'post-detail',params:{id:item.id}}">
                    <span class="is-size-6">{{ item.title }}</span>
                  </router-link>
                </el-tooltip>
              </p>
            </div>
            <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
              <div class="level-left">
                <div class="level-left">
                  <router-link class="level-item" :to="{ path: `/home/member/${item.username}/homeIndex`}">
                   <!-- :to="{ path: `/home/member/${user.username}/homeIndex` }" -->
                    {{ item.alias }}
                  </router-link>

                  <span class="mr-1">
                    发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                  </span>

                  <span
                    v-for="(tag, index) in item.tags"
                    :key="index"
                    class="tag is-hidden-mobile is-success is-light mr-1"
                  >
                    <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                      {{ "#" + tag.name }}
                    </router-link>
                  </span>

                  <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
                </div>
              </div>
            </nav>
          </div>
          <div class="media-right" />
        </article>
      </div>

      <!--分页-->
      <pagination
        v-show="query.total > 0"
        :total="query.total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="fetchList"
      />
    </el-card>
  </div>
</template>

<script>
import { searchByKeyword } from '@/api/search'
import Pagination from '../components/Pagination/index.vue'

export default {
  name: 'Search',
  components: { Pagination },
  data () {
    return {
      list: [],
      searchKey: '',
      query: {
        keyword: this.$route.query.key,
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted () {
    this.fetchList()
  },
  created () {
    console.log(this.$route.query.key)
  },
  methods: {
    fetchList () {
      searchByKeyword(this.query).then(value => {
        console.log(value)
        const { data } = value
        this.list = data.records
        this.query.total = data.total
        this.query.pageSize = data.size
        this.query.pageNum = data.current
      })
    },
    goff () {
      this.$router.go(-1)
    },
    search () {
      // console.log(this.token)
      if (this.searchKey.trim() === null || this.searchKey.trim() === '') {
        this.$message.info({
          showClose: true,
          message: '请输入关键字搜索！',
          type: 'warning'
        })
        return false
      }
      this.query.keyword = this.searchKey
      console.log(this.query.keyword)
      this.$router.push({ path: '/home/search?key=' + this.query.keyword })
      this.fetchList()
    }
  }
}
</script>

<style scoped>
.bc1{
  height: 70vh;
}

</style>
